<template>
	<view style="padding: 40rpx 20rpx">
		<scan></scan>
		<view class="search-view">
			<view class="search">
				<text @tap="scanCode()" style="font-size: 50rpx;margin-right: 20rpx;" class="tn-icon-scan"></text>
				<input v-model="waybill_no" style="font-size: 28rpx;width: 100%;" class="uni-input"
					confirm-type="search" placeholder="请输入或扫描运单号/集包号进行揽收" />
			</view>
			<tn-button @tap="pickup" backgroundColor="tn-bg-blue" fontColor="#fff">确 定</tn-button>
		</view>
		<view class="goods_type">
			<view class="list_content">
				<view @tap="changeType(item)" :class="goods_type_id == item.id?'list_item list_active':'list_item'"
					v-for="(item,index) in typeList" :key="index">
					{{item.name}}
				</view>
			</view>
		</view>

		<view class="scan-content">
			<div class="scan-title">
				<span>扫描明细</span>
				<span>本次扫描数量: {{scanList.length}}</span>
			</div>
			<div style="text-align: center;padding: 40rpx 0;color: #999;" v-if="!scanList.length">
				暂无揽收记录
			</div>
			<div class="scan-list">
				<div v-for="(item,index) in scanList" :key="index" class="scan-item">
					<view class="">
						{{item.waybill_no}}
					</view>
					<view class="">
						{{item.goods_name}}
					</view>
				</div>
			</div>
		</view>
		<view class="" style="display: flex;justify-content: center;margin-top: 100rpx;">
			<tn-button @tap="back" width="550rpx" height="80rpx" backgroundColor="tn-bg-blue"
				fontColor="tn-color-white">扫描完成</tn-button>
		</view>
	</view>
</template>

<script>
	import scan from "@/common/pdaScan.vue"
	export default {
		components: {
			scan
		},
		data() {
			return {
				number: 0,
				data: {},
				scanList: [],
				waybill_no: "",
				typeList: [],
				goods_type_id: '',
				goods_name: ''
			}
		},
		onLoad(options) {

			this.getlistType()
		},
		onShow: function() {
			var that = this
			uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器  
			uni.$on('scancodedate', function(data) {
				that.waybill_no = data.code
				that.pickup()
			})
		},
		methods: {
			changeType(item) {
				this.goods_type_id = item.id
				this.goods_name = item.name
			},
			getlistType() {
				this.$api.admin({
					apiUrl: '/goods/listType',
					param: {}
				}).then((res) => {
					this.typeList = res.data.data.list
					this.goods_type_id = res.data.data.list[0].id
					this.goods_name = res.data.data.list[0].name
				}).catch((err) => {})
			},
			scanCode() {
				var that = this
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						that.waybill_no = res.result
						that.pickup()
					}
				});
			},
			pickup() {
				uni.showLoading({
					title: '获取扫描信息中...',
					icon: 'none'
				});
				this.$api.admin({
					apiUrl: '/order/updatePickup',
					param: {
						"scan_number": this.waybill_no, //运单号
						"goods_type_id": this.goods_type_id //货物类型 ID
					}
				}).then((res) => {
					uni.hideLoading();
					this.scanList.unshift({
						waybill_no: this.waybill_no,
						goods_name: this.goods_name
					})
				}).catch((err) => {
					uni.hideLoading();
				})
			},
			back() {
				uni.reLaunch({
					url: '/pages/index/home'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.search-view {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.search {
		border: 1rpx solid #d9d9d9;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		width: 80%;
		display: flex;
		align-items: center;
	}

	.scan-content {
		margin-top: 20rpx;

		.scan-title {
			background-color: #3D7EFF;
			padding: 20rpx;
			color: #fff;
			display: flex;
			justify-content: space-between;
		}

		.scan-list {
			margin-top: 30rpx;

			.scan-item {
				border-bottom: 1rpx solid #e7e7e7;
				padding: 30rpx 0;
				display: flex;
				justify-content: space-between;
			}
		}
	}

	.list_content {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;

		.list_item {
			margin-right: 10rpx;
			font-size: 28rpx;
			border: 1rpx solid #d9d9d9;
			margin-bottom: 10rpx;
			padding: 2rpx 10rpx;
			border-radius: 10rpx;
			color: #666;
		}

		.list_active {
			background-color: #3D7EFF;
			border: 1rpx solid #3D7EFF;
			color: #fff;
		}
	}
</style>